<template>
  <!--TODO: 默认图片在 cos 上添加 -->
  <movable-area
    v-if="conversation.conversationID"
    class="t-conversation-item-container"
  >
    <movable-view
      class="t-conversation-item"
      direction="horizontal"
      @change="handleTouchMove"
      damping="100"
      :x="xScale"
    >
      <view class="avatar-box">
        <image
          class="t-conversation-item-avatar"
          mode="aspectFill"
          :src="conversationAvatar"
          @error="handleImageError"
        ></image>
        <view class="unread" v-if="conversation.unreadCount !== 0">
          <view class="read-text" v-if="conversation.unreadCount > 99"
            >99+</view
          >
          <view class="read-text" v-else>{{ conversation.unreadCount }}</view>
        </view>
      </view>
      <view class="t-conversation-item-content">
        <label class="tui-conversation-item-name">{{ conversationName }}</label>
        <view class="tui-conversation-lastMessage">{{ messageForShow }}</view>
      </view>
      <view class="t-conversation-item-info">{{ conversation.timeago }}</view>
      <!-- <view class="t-conversation-delete" @tap.stop="deleteConversation">删除</view> -->
    </movable-view>
  </movable-area>
</template>

<script>
export default {
  data() {
    return {
      xScale: 0,
      conversationName: "",
      conversationAvatar: "",
      messageForShow: ""
    };
  },

  components: {},
  props: {
    conversation: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    conversation: {
      handler: function (conversation) {
        // 计算时间戳
        this.setData({
          conversationName: this.getConversationName(conversation),
          conversationAvatar: this.setConversationAvatarHandler(conversation),
          messageForShow: this.getConversationForShow(conversation)
        });
        this.$updateTimeago(conversation);
      },
      immediate: true,
      deep: true,
    }
  },

  methods: {
    // 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID
    getConversationName(conversation) {
      if (conversation.type === "@TIM#SYSTEM") {
        return "系统通知";
      }

      if (conversation.type === "C2C") {
        return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID
      }

      if (conversation.type === "GROUP") {
        return conversation.groupProfile.name || conversation.groupProfile.groupID
      }
    },

    setConversationAvatarHandler(conversation) {
      if (conversation.type === "@TIM#SYSTEM") {
        return "https://web.sdk.qcloud.com/component/TUIKit/assets/system.png";
      }

      if (conversation.type === "C2C") {
        return conversation.userProfile.avatar || "https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png";
      }

      if (conversation.type === "GROUP") {
        return conversation.groupProfile.avatar || ""
      }
    },
    getConversationForShow(conversation){
      if (conversation.conversationID) {
        if(conversation.lastMessage.type === "TIMCustomElem"){
          const payloadData = conversation.lastMessage.payload.data ? JSON.parse(conversation.lastMessage.payload.data) : ""
          if(payloadData && payloadData.businessID === 'archives'){
            return payloadData.displayText
          }
        }
        return conversation.lastMessage.messageForShow.slice(0, 15);
      }
    },
    deleteConversation() {
      uni.showModal({
        content: "确认删除会话？",
        success: (res) => {
          if (res.confirm) {
            uni.$TUIKit.deleteConversation(this.conversation.conversationID);
            this.setData({
              conversation: {},
              xScale: 0,
            });
          }
        },
      });
    },

    handleTouchMove(e) {
      if (!this.lock) {
        this.last = e.detail.x;
        this.lock = true;
      }

      if (this.lock && e.detail.x - this.last < -5) {
        this.setData({
          xScale: -75,
        });
        setTimeout(() => {
          this.lock = false;
        }, 2000);
      } else if (this.lock && e.detail.x - this.last > 5) {
        this.setData({
          xScale: 0,
        });
        setTimeout(() => {
          this.lock = false;
        }, 2000);
      }
    },

    $updateTimeago(conversation) {
      this.setData({
        conversation,
      });
    },

    handleImageError() {
      this.setData({
        conversationAvatar: "",
      });
    },
  },
};
</script>
<style>
.t-conversation-item-container {
  width: 100vw;
  height: 150rpx;
  background-color: #ffffff;
}

.t-conversation-item {
  width: 100vw;
  height: 150rpx;
  display: flex;
  left: 0;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  border-bottom: 2rpx solid #eef0f3;
}
.avatar-box {
  position: relative;
  display: inline-flex;
}
.t-conversation-item-avatar {
  position: relative;
  width: 96rpx;
  height: 96rpx;
  border-radius: 14rpx;
  margin-left: 32rpx;
  overflow: auto;
}
.t-conversation-item-content {
  flex: 1;
  max-width: 62%;
  padding: 0 20rpx;
}
.t-conversation-item-info {
  line-height: 34rpx;
  font-size: 24rpx;
  color: #999999;
  text-align: center;
  width: 20%;
  flex-shrink: 0;
}

.t-error {
  background-color: #fb5250;
  color: #fff;
}

.t-conversation-delete {
  width: 144rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e85454;
  color: #ffffff;
  line-height: 44rpx;
  font-size: 32rpx;
}

.tui-conversation-item-name {
  line-height: 53rpx;
  font-size: 36rpx;
  color: #333333;
}

.tui-conversation-lastMessage {
  line-height: 40rpx;
  min-height: 40rpx;
  font-size: 28rpx;
  color: #999999;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.unread {
  top: -10rpx;
  right: 0rpx;
  position: absolute;
  padding: 0 10rpx;
  height: 15px;
  border-radius: 16rpx;
  color: #ffffff;
  background-color: red;
}
.read-text {
  line-height: 15px;
  font-size: 10px;
}
</style>
